<template>
	<div id="container" class="container">

		<div class="onepage">
			<div class="container" id="school_background">
				<div class="row">
					<div class="layui-tab col-md-12">
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<div class="layui-row layui-col-space15">
									<div class="layui-col-md12">
										<div class="layui-panel" style=" border-radius: 15px;">
											<!--面板-->
											<div style="padding: 30px;">
												<el-input class="form-control" placeholder="输入学校名称"
													v-model="schoolInfo.schoolName"
													style="width: 50%;"></el-input>
												<el-button type="success" style="margin-left: 20px;"
													v-on:click="search()">搜索</el-button>
											</div>
											<div class="school-select">
												<div class="row">

													<div id="selector" class="col-lg-5">
														<!-- 院校所在地选择器 -->
														<div class="block">
															<span class="demonstration">院校所在地：</span>
															<el-cascader ref="myCascader" placeholder="全部" clearable
																:options="cityLocs" :props="props" filterable>
															</el-cascader>
															<el-button type="success" style="margin-left: 30px;" @click="search()"
																icon="el-icon-search" size="small" circle ></el-button>
														</div>
													</div>
													<div id="selector" class="col-lg-5">
														<div>
															<span class="demonstration">院校类型：&nbsp;&nbsp;&nbsp;&nbsp;</span>
															<el-select v-model="schoolInfo.schoolType" placeholder="全部">
																<el-option v-for="item in schoolTypes" :key="item.value"
																	:label="item.label" :value="item.value">
																</el-option>
															</el-select>
															<el-button type="success" style="margin-left: 30px;" @click="search()"
																icon="el-icon-search" size="small" circle ></el-button>
														</div>
													</div>

													<div id="selector" class="col-lg-5">
														<div>
															<span class="demonstration">院校特色：&nbsp;&nbsp;&nbsp;&nbsp;</span>
															<el-select v-model="schoolInfo.feature" placeholder="全部">
																<el-option v-for="item in features" :key="item.value"
																	:label="item.label" :value="item.value">
																</el-option>
															</el-select>
															<el-button type="success" style="margin-left: 30px;" @click="search()"
																icon="el-icon-search" size="small" circle ></el-button>
														</div>
													</div>
													<div id="selector" class="col-lg-5">
														<div>
															<span class="demonstration">办学类型：&nbsp;&nbsp;&nbsp;&nbsp;</span>
															<el-select v-model="schoolInfo.doType" placeholder="全部">
																<el-option v-for="item in dotypes" :key="item.value"
																	:label="item.label" :value="item.value">
																</el-option>
															</el-select>
															<el-button type="success" style="margin-left: 30px;" @click="search()"
																icon="el-icon-search" size="small" circle ></el-button>
														</div>
													</div>

													<!-- +对比框 -->
													<el-card id="comparisonBox" v-show="comparisonShow" >
														<span style="font-weight: bold;font-size: 18px;">高校对比</span>
														<span style="font-size: 10px;color: gray;margin-left: 5px;">最多4所</span>
														<i class="layui-icon layui-icon-close"
															style="float: right;"
															@click="comparisonCloseBox"></i>
														<el-divider></el-divider>
														<div v-for="(school,index) in comparisonSchools">
															<span>
																{{school}}
																<i class="layui-icon layui-icon-delete"
																	style="float: right;"
																	@click="deleteComparison(index)"></i>
															</span>
															<div style="height: 20px;">
															</div>
														</div>
														<el-button type="success"
															style="bottom: 10px; width: 80%;
																position: absolute; "
															@click="startComparison">
															开始对比</el-button>
													</el-card>

													<el-dialog title="学校对比" v-model="comparisonDialog" width="80%" :before-close="handleClose">

														<template #footer>
															<span class="dialog-footer">
																<el-button type="primary" @click="comparisonDialog = false">确 定</el-button>
															</span>
														</template>
													</el-dialog>

												</div>

											</div>

										</div>
									</div>
									<div class="layui-col-md12">
										<div class="layui-panel" style=" border-radius: 15px;">

											<!-- 多选框 -->
											<div id="checkbox">
												<el-checkbox v-model="Closer" :disabled="disabled1"
														@change="changeCheck">距离优先</el-checkbox>
												<el-checkbox v-model="Famous" :disabled="disabled2"
														@change="changeCheck">人气排序</el-checkbox>
												<el-checkbox v-model="UseScoreSearch" :disabled="disabled3"
														@change="changeScore">大学分数线</el-checkbox>
											</div>

											<!-- 输入分数线等数据时出现的显示框 -->
											<el-dialog title="输入分数区间" v-model="dialogVisible">
												<div id="input_box">
													<el-form id="input_form">
														<el-form-item label="年份&nbsp;&nbsp;&nbsp;&nbsp;">
															<el-radio-group v-model="schoolInfo.admYear">
															    <el-radio :label="2021" @change="returnYear">2021</el-radio>
															    <el-radio :label="2020" @change="returnYear">2020</el-radio>
															    <el-radio :label="2019" @change="returnYear">2019</el-radio>
																<el-radio :label="2018" @change="returnYear">2018</el-radio>
																<el-radio :label="2017" @change="returnYear">2017</el-radio>
															</el-radio-group>
														</el-form-item>
														<el-form-item label="招生类型">
															<el-select v-model="schoolInfo.admType" placeholder="普通类">
																<el-option v-for="aType in aTypes"
																:label="aType.label" :value="aType.value"></el-option>
															</el-select>
														</el-form-item>
														<el-form-item label="批次&nbsp;&nbsp;&nbsp;&nbsp;">
															<el-select v-model="schoolInfo.admSchoolBatch" placeholder="全部批次">
																<el-option v-for="batch in batches" :key="batch"
																:label="batch" :value="batch"></el-option>
															</el-select>
														</el-form-item>
														<el-form-item label="最低分">
															<el-input v-model="schoolInfo.loScore">
															</el-input>
														</el-form-item>
														<el-form-item label="最高分">
															<el-input v-model="schoolInfo.hiScore">
															</el-input>
														</el-form-item>
														<el-form-item>
															<el-button type="success" v-on:click="commitScore"
																:plain="true" style="float: right;">
																确定
															</el-button>
														</el-form-item>
													</el-form>
												</div>

											</el-dialog>


											<div style="padding: 30px;">
												<div id="show_content">
													<!-- 所有院校信息显示在表格中 -->
													<div id="show_table">
														<el-table :data="schoolInfos" style="width: 100%">
															<el-table-column prop="schoolLogo" label="图片" width="100">
																<template #default="scope">
																	<el-image
																	      style="width: 60px; height: 60px"
																	      :src="getImg(scope.$index, scope.row)"></el-image>
																</template>

															</el-table-column>
															<el-table-column prop="schoolName" label="院校名称" width="130">

															</el-table-column>
															<el-table-column prop="schoolCity" label="所在地"
																width="130">
															</el-table-column>
															<el-table-column prop="schoolType" label="院校类型" width="130">
															</el-table-column>
															<el-table-column prop="doType" label="办学类型" width="130">
															</el-table-column>
															<el-table-column prop="feature" label="院校特色" width="130">
															</el-table-column>
															<el-table-column prop="scoreAndRank" label="最低分/最低位次"
																width="150">
															</el-table-column>
															<el-table-column prop="schoolId" label="操作" fixed="right"
																width="100">
																<template #default="scope">
																        <el-button
																          size="mini"
																		  type="success"
																          @click="tansToSchoolInfo(scope.row)">查 看</el-button>
																		  <!-- <el-button
																		  size="mini"
																		  :disabled="disabled4"
																		  @click="comparisonShowBox(scope.row)">+对比</el-button> -->
																</template>

															</el-table-column>
														</el-table>
													</div>
													<!-- 分页 -->
													<div id="page_content">
														<el-pagination background layout="prev, pager, next"
															:total="pageTotal" :page-size="pageSize"
															@current-change="pageData">
														</el-pagination>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

							</div>

						</div>
					</div>

				</div>

			</div>
		</div>



	</div>
</template>

<script>

	import { ElMessage } from 'element-plus'

	export default {
		name: 'School',
		data() {
			return {
				schoolInfo: {
					schoolLogo: '',  // 校徽
					schoolName: '',  // 校名
					Citys: [],       // 选择学校所在地
					userProvince: '山东', // 考生所在省份
					userCity: '青岛', // 考生所在城市
					schoolType: '',   // 学校类型
					doType: '',  // 办学类型
					feature: '',  // 院校特色
					closer: 0,   // 是否采用距离优先
					famous: 0,  // 是否采用人气排序
					useScoreSearch: 0,  // 是否查看大学分数线
					loScore: 0, //最低分
					hiScore: 750,  // 最高分
					admYear: 2021,  //年份
					admSchoolBatch: '', // 该年份招生批次
					admtype: '' ,// 招生类型
					majorId: 0, // 专业代号
				},
				comparisonDialog: false,
				schoolImg:'',
				Closer: 0,
				Famous: 0,
				UseScoreSearch: 0,
				disabled1: false,  // 距离、分数线等多选框是否禁用
				disabled2: false,
				disabled3: false,
				disabled4: false,
				comparisonShow: false,
				batches: ["普通类一段","本科提前批"],
				aTypes: [{value: '',
					label: '全部招生类型'},
					{value: '普通类',
						label: '普通类'},
					{value: '其他',
						label: '其他'}	],
				comparisonSchools: [], //+对比学校列表
				schoolInfos: [],  // 从后台返回的学校信息数据
				pageNum: 1,
				pageTotal: 0,
				pageSize: 10,
				cityLocs: [],   // 从后台返回的所有城市

				dialogVisible: false, // 输入分数线的输入框
				props: {             // 城市级联选择其的参数
					multiple: true,
					children: 'citys',
					label: 'city',
					value: 'city',
				},
				schoolTypes: [{
					value: '',
					label: '全部'
				}, {
					value: '综合',
					label: '综合'
				}, {
					value: '理工',
					label: '理工'
				}, {
					value: '农林',
					label: '农林'
				}, {
					value: '医药',
					label: '医药'
				}, {
					value: '师范',
					label: '师范'
				}, {
					value: '语言',
					label: '语言'
				}, {
					value: '财经',
					label: '财经'
				}, {
					value: '政法',
					label: '政法'
				}, {
					value: '体育',
					label: '体育'
				}, {
					value: '艺术',
					label: '艺术'
				}, {
					value: '民族',
					label: '民族'
				}, {
					value: '军事',
					label: '军事'
				}, {
					value: '其他',
					label: '其他'
				}],
				value: '',
				features: [{
					value: '',
					label: '全部'
				}, {
					value: '985',
					label: '985'
				}, {
					value: '211',
					label: '211'
				}, {
					value: '双一流',
					label: '双一流'
				}, {
					value: '教育部直属',
					label: '教育部直属'
				}],
				dotypes: [{
						value: '',
						label: '全部'
					}, {
						value: '本科',
						label: '本科'
					}, {
						value: '专科（高职）',
						label: '专科（高职）'
					}, {
						value: '中外合作办学',
						label: '中外合作办学'
					}, {
						value: '公办',
						label: '公办'
					},
					{
						value: '民办',
						label: '民办'
					},
					{
						value: '独立学院',
						label: '独立学院'
					}
				],
			} // return
		}, // data
		props: ["majorId"], // 从父组件获取到的值
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			childMethod() {
			        this.init();
			      },
			// 设置省份和城市
			getPosition(){
				this.schoolInfo.userProvince = localStorage.getItem('province');
				this.schoolInfo.userCity = localStorage.getItem('city');
				this.$forceUpdate();
			},
			// 初始化函数，获取所有城市信息
			init() {
				// console.log(this.majorId),
				// console.log(this.userCity);
				this.schoolInfo.pageNum = this.pageNum;
				this.schoolInfo.pageSize = this.pageSize;

				this.schoolInfo.majorId = this.majorId;
				// 获取是否距离优先等的确认值
				if (this.Closer == true) {
					this.schoolInfo.closer = 1;
				} else {
					this.schoolInfo.closer = 0;
				}
				if (this.Famous == true) {
					this.schoolInfo.famous = 1;
				} else {
					this.schoolInfo.famous = 0;
				}
				if (this.UseScoreSearch == true) {
					this.schoolInfo.useScoreSearch = 1;
				} else {
					this.schoolInfo.useScoreSearch = 0;
				}
				// 把json对象转成字符串
				var param = this.$qs.stringify(this.schoolInfo);
				// console.log(this.schoolInfo);

				// 传参获取后台数据
				this.$axios.post("/school/searchSchool", param)
					.then(rst => {

						this.schoolInfos = rst.data.list;
						// console.log(this.schoolInfos);
						this.pageTotal = rst.data.total;

					}).catch(ex => {
						console.log(ex);
					});
			},
			getImg(index, row){

				return row.schoolLogo;
			},
			search() {
				// 从第一页显示
				this.pageNum = 1;
				// 获取城市级联选择器的返回值，并将返回值中的所有城市保存在要传入后台的参数中
				let dataRecieve = this.$refs.myCascader.getCheckedNodes(true);
				if(dataRecieve.length == 0){
					this.schoolInfo.Citys = [];
				}else{
					for (let i in dataRecieve) {
						this.schoolInfo.Citys[i] = dataRecieve[i].data.city;
					}
				}

				// console.log(this.schoolInfo.Citys);
				this.init();

			},
			//获取后台的城市
			initArea() {
				this.$axios.post("/city/findAll")
					.then(rst => {
						for (var i = 0; i < rst.data.length; i++) {

							//把json数据中的province属性全部转换成city 以获取children中的同一属性值
							this.cityLocs[i] = JSON.parse(JSON.stringify(rst.data[i]).replace(/province/g, "city"));

							this.cityLocs[i].city = rst.data[i].province;

						}

					}).catch(ex => {
						console.log(ex);
					})

			},

			// 向school Info页面传递学校Id
			tansToSchoolInfo(row){
				// console.log(row);
				const { href } = this.$router.resolve({
				      path: `/schoolInfo`,
				      query: {
				        id: row.schoolId,
				      }
				    });
				window.open(href, '_blank');
			},
			// +对比框显示
			comparisonShowBox(row){
				this.comparisonShow = true
				if(this.comparisonSchools.length == 4){
					ElMessage.error('一次最多只能对比4所学校！')
				}else if(this.comparisonSchools.indexOf(row.schoolName) > -1){
					ElMessage.error('该学校已存在！')
				}
				else{
					this.comparisonSchools.push(row.schoolName);
				}
			},
			// 关闭对比框
			comparisonCloseBox(){
				this.comparisonShow = false
			},
			// 删除对比框的某个学校
			deleteComparison(index){
				this.comparisonSchools.splice(index,1);
			},
			// 跳转页面开始对比信息
			startComparison(){
				if(this.comparisonSchools.length < 2){
					ElMessage.warning({
						message: '请至少选择2个学校',
						type: 'warning'
					});
				}else{
					this.comparisonDialog = true
					this.comparisonShow = false
				}
			},
			// 分页信息
			pageData(curr) {
				this.pageNum = curr;
				this.init();
			},
			// 距离优先、人气排序与分数线查询之间的逻辑关系
			changeCheck(){

				if(this.Closer == true || this.Famous == true){
					this.disabled3 = true;
				}
				else if(this.Closer == false && this.Famous == false){
					this.disabled3 = false;
				}
				this.init();
			},
			// 距离优先、人气排序与分数线查询之间的逻辑关系
			changeScore(){
				if(this.UseScoreSearch == true){
					this.disabled1 = true;
					this.disabled2 = true;
				}
				else{
					this.disabled1 = false;
					this.disabled2 = false;
				}
				if(this.UseScoreSearch == true){
					this.dialogVisible = true;
				}else{
					this.dialogVisible = false;
				}

			},
			// 根据年份选择框的值，从后台返回该年份的招生类型
			returnYear(){
				var param = this.$qs.stringify(this.schoolInfo);
				this.$axios.post("/admScore/batch", param)
					.then(rst => {
						// console.log(rst.data);
						this.batches = rst.data;
					}).catch(ex => {
						console.log(ex);
					});
			},
			// 提交分数区间
			commitScore(){
				if(this.schoolInfo.loScore > this.schoolInfo.hiScore){
					ElMessage.error('最低分不得大于最高分！');
				}else{
					this.dialogVisible = false;
					console.log(this.schoolInfo);
					this.init();
				}
			},

		},

		created() {
			this.init();
			this.initArea();
		},
		components: {

		},
		mounted() {
			window.layui.use('layer', function() {

			})
		}
	}
</script>

<style scoped>
	.navigation_bar {
		margin-top: 20px;
	}


	.navigation_bar ul.nav>li>a {
		color: #000000;
		font-size: 17px;
		font-weight: bold;
	}

	.input-group-btn .btn {
		background-color: #1eb450;

	}

	.search {
		margin-top: -10px;
	}


	.onepage {
		margin-top: 20px;
	}


	@media screen and (min-width: 1280px) {
		.container {
			width: 1280px;
		}

	}

	.firsthead {
		line-height: 25px;
	}

	.logo img {
		width: 100%;
	}

	div.head {
		display: block;
		background: #eee;
		border-bottom: 1px solid #ccc;
		font-size: 18px;
		text-align: center;
		font-weight: 800;
		text-decoration: none;
	}

	.onepage ul>li {
		font-size: 20px;
		font-weight: 500;
	}

	.school-select {
		margin-bottom: 20px;
	}


	.search_button {
		color: white;
	}

	#selector {
		margin-top: 10px;
		margin-left: 30px;
	}

	.el-checkbox {
		margin-left: 30px;
		margin-top: 30px;
	}

	#school_background {
		/* background-color: -webkit-linear-gradient(bottom, white, #90EE90, #67C23A) no-repeat; */
		/* background-color: #E6F1FE; */
		background-image: url(../assets/backimg.png);
		border-radius: 30px;
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
	#comparisonBox{
		width: 250px;
		height: 350px;
		top: 20%;
		right: 0;
		z-index: 9999;
		position: fixed;
		border-radius: 10px;
	}
</style>
